<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <head>
        <title>Insert title here</title>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
        <title>Hello, Bootstrap Table!</title>
        <meta charset="UTF-8">
        <title>Title</title>
        <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
        <!-- 最新 Bootstrap4 核心 CSS 文件 -->
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!--时间控件-->
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
              rel="stylesheet">
        <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
        <script rel="stylesheet" th:src="@{/js/bootstrap.bundle.min.js} "></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script rel="stylesheet" th:src="@{/js/bootstrap.min.js}"></script>
        <!-- BootStrapValidator -->
        <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"
              rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"
                type="text/javascript"></script>
        <!--时间控件-->
        <script th:src="@{/daterangepicker/moment.js}"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <script th:src="@{/js/functions.js}"></script>

    </head>
</head>
<style>
    body,div {
        padding: 0;
        margin: 0;
    }

    .to {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

    .to1 {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        background-color: white;
        position: relative;
    }

    .to2 {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -52px;
        margin-top: -52px;
    }

    .to3 {
        width: 106px;
        height: 106px;
        border-radius: 50%;
        background-color: aqua;
        position: relative;
    }
</style>
<body>
<div th:include="../templates/user/top::headtop"></div>
<div class="container" id="content">
    <div class="row">
        <div th:include="../templates/user/menu::headmenu"></div>
        <div class="col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <body>
                    <br>
                    <div style="width:200px" align="center">
                        <div class="to3" align="center">
                            <div class="to2" align="center">
                                <div class="to1" align="center">
                                    <img class="to" alt="aaa" th:src="@{/images/movie_user.png}">
                                </div>
                            </div>
                        </div>
                    </div>
                    </body>
                    <div class="row">
                        <h1 class="col-md-5">个人信息</h1>
                </div>
                <form class="form" id="regForm" th:method="post" th:action="@{/user/UpdataUser}">
                    <div class="modal-body">
                        <div class="form-group row">
                            <div class="col-md-2">
                                <label for="username">用户名</label>
                            </div>
                            <input type="hidden" name="user_id" th:value="${userList.user_id}">
                            <div class="col-md-6">
                                <input type="text" id="user_name" name="user_name"
                                       class="form-control input-sm" placeholder="用户名" required  th:value="${userList.user_name}"/><span
                                    id="result"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-2">
                                <label for="password">密码</label>
                            </div>
                            <div class="col-md-6">
                                <input type="password" id="password" name="password"
                                       class="form-control input-sm" placeholder="密码" required th:value="${userList.password}" />
                            </div>
                        </div>



                        <div class="form-group row">
                            <div class="col-md-2">
                                <label for="real_name">姓名</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="real_name" name="real_name"
                                       class="form-control input-sm" placeholder="姓名" th:value="${userList.real_name}"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-2">
                                <label for="age">年龄</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="age" name="age"
                                       class="form-control input-sm" placeholder="姓名" th:value="${userList.age}"/>
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-md-2">
                                <label for="gender">性别</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="radio" class="form-check-input" name="gender"
                                           value="1"  th:field="*{userList.gender}">
                                    <label class="form-check-label" for="gender">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="radio" class="form-check-input" name="gender"
                                           value="0" th:field="*{userList.gender}">
                                    <label class="form-check-label" for="gender" >女</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="phone">手机</label>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="phone" name="phone"
                                   class="form-control input-sm" placeholder="手机" th:value="${userList.phone}"/>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="email">邮箱</label>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="email" name="email"
                                   class="form-control input-sm" placeholder="邮箱" th:value="${userList.email}"/>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="text-center">
                                <button class="btn btn-primary" type="submit">确定</button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button class="btn btn-secondary" type="reset">重置</button>
                            </div>
                        </div>
                    </div>

                </form>

            </div>

        </div>
    </div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="film_Intro" role="dialog" tabindex="-1">
    <td><textarea class="form-control" cols="20" name="film_Intro" rows="5"></textarea></td>
</div>
<script type="text/javascript">
    //时间控件
    $(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'YYYY-MM-DD hh:mm',
            locale: moment.locale('zh-cn')
        });
    });

    $(function () {
        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD hh:mm',
            locale: moment.locale('zh-cn')
        });
    });

</script>

</body>
</html>